<template>
  <div class="service" id="solution_m">
    <div class="banner">
      <client-carousel arrows="never" height="564px" :url="banner" />
    </div>
    <div class="main">
      <client-title title="一站式端到端云原生服务" class="content-title" />
      <div class="min-container">
        <ul>
          <li
            v-for="(i, k) in list"
            :key="k"
            :class="{ active: i.active }"
            @click="changeTab(i)"
          >
            {{ i.content }}
          </li>
        </ul>
        <div class="row">
          <div class="btn">了解中酒云网服务</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { getAssetURL } from "@/utils/load_assets";
import ClientTitle from "@/components/client-title/client-title.vue";
const bannerUrl = getAssetURL("client/home/content/banner2.png");
const banner = ref<any>([{ url: bannerUrl }])
const list = ref<any>([
  { content: "五大解决方案应对不同行业痛点", active: true },
  { content: "多年专业经验及规划、设计、培训服务", active: false },
  { content: "一站式端到端顶层设计、技术赋能、平台支撑", active: false },
  { content: "客户信赖、行业认可", active: false },
  { content: "多领域专家团队及资深顾问保障", active: false },
]);

// 切换数据
const changeTab = (i: any) => {
  list.value.forEach((item: any) => (item.active = false));
  i.active = true;
};
</script>
<style lang="less" scoped>
.service {
  position: relative;
  margin-bottom: 30px;
  .main {
    position: absolute;
    top: 0;
    width: 100%;
    .content-title {
      text-align: center;
      margin: 40px;
    }
    ul {
      width: 400px;
      border-right: 4px solid #fff;
      text-align: right;
      li {
        font-weight: 600;
        margin-bottom: 10px;
        padding: 20px;
        transition: all 0.3s;
        &:hover {
          cursor: pointer;
          background: linear-gradient(
            270deg,
            #f3f5f7 20.83%,
            rgba(234, 236, 240, 0) 100%
          );
          border-right: 4px solid #4098ff;
          margin-right: -4px;
        }
      }
      .active {
        background: linear-gradient(270deg, #f3f5f7 20.83%, rgba(234, 236, 240, 0) 100%);
        border-right: 4px solid #4098ff;
        margin-right: -4px;
      }
    }
    .row {
      width: 400px;
      display: flex;
      justify-content: right;
      padding-right: 4px;
      .btn {
        left: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 172px;
        height: 50px;
        background: #4098ff;
        color: #fff;
        &:hover {
          cursor: pointer;
          background: #3390fa;
        }
      }
    }
  }
}
</style>
